<template>
  <PageWrapper title="动态表单示例">
    <div class="mb-4">
      <a-button @click="changeLabel3" class="mr-2"> 更改字段3label </a-button>
      <a-button @click="changeLabel34" class="mr-2">
        同时更改字段3,4label
      </a-button>
      <a-button @click="appendField" class="mr-2">
        往字段3后面插入字段10
      </a-button>
      <a-button @click="deleteField" class="mr-2"> 删除字段11 </a-button>
    </div>
    <CollapseContainer title="动态表单示例,动态根据表单内其他值改变">
      <BasicForm @register="register" />
    </CollapseContainer>

    <CollapseContainer class="mt-5" title="componentProps动态改变">
      <BasicForm @register="register1" />
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { BasicForm, FormSchema, useForm } from "@/components/Form";
import { CollapseContainer } from "@/components/Container";
import { PageWrapper } from "@/components/Page";

const schemas: FormSchema[] = [
  {
    field: "field1",
    component: "Input",
    label: "字段1",
    colProps: {
      span: 8,
    },
    show: ({ values }) => {
      return !!values.field5;
    },
  },
  {
    field: "field2",
    component: "Input",
    label: "字段2",
    colProps: {
      span: 8,
    },
    ifShow: ({ values }) => {
      return !!values.field6;
    },
  },
  {
    field: "field3",
    component: "DatePicker",
    label: "字段3",
    colProps: {
      span: 8,
    },
    dynamicDisabled: ({ values }) => {
      return !!values.field7;
    },
  },
  {
    field: "field4",
    component: "Select",
    label: "字段4",
    colProps: {
      span: 8,
    },
    dynamicRules: ({ values }) => {
      return values.field8 ? [{ required: true, message: "字段4必填" }] : [];
    },
    componentProps: {
      options: [
        {
          label: "选项1",
          value: "1",
          key: "1",
        },
        {
          label: "选项2",
          value: "2",
          key: "2",
        },
      ],
    },
  },
  {
    field: "field11",
    component: "DatePicker",
    label: "字段11",
    colProps: {
      span: 8,
    },
  },
  {
    field: "field5",
    component: "Switch",
    label: "是否显示字段1(css控制)",
    colProps: {
      span: 8,
    },
    labelWidth: 200,
  },
  {
    field: "field6",
    component: "Switch",
    label: "是否显示字段2(dom控制)",
    colProps: {
      span: 8,
    },
    labelWidth: 200,
  },
  {
    field: "field7",
    component: "Switch",
    label: "是否禁用字段3",
    colProps: {
      span: 8,
    },
    labelWidth: 200,
  },
  {
    field: "field8",
    component: "Switch",
    label: "字段4是否必填",
    colProps: {
      span: 8,
    },
    labelWidth: 200,
  },
];

const schemas1: FormSchema[] = [
  {
    field: "f1",
    component: "Input",
    label: "F1",
    colProps: {
      span: 12,
    },
    labelWidth: 200,
    componentProps: ({ formModel }) => {
      return {
        placeholder: "同步f2的值为f1",
        onChange: (e) => {
          formModel.f2 = e.target.value;
        },
      };
    },
  },
  {
    field: "f2",
    component: "Input",
    label: "F2",
    colProps: {
      span: 12,
    },
    labelWidth: 200,
    componentProps: { disabled: true },
  },
  {
    field: "f3",
    component: "Input",
    label: "F3",
    colProps: {
      span: 12,
    },
    labelWidth: 200,
    // @ts-ignore
    componentProps: ({ formActionType }) => {
      return {
        placeholder: "值改变时执行查询,查看控制台",
        onChange: async () => {
          const { validate } = formActionType;
          // tableAction只适用于在表格内开启表单的例子
          // const { reload } = tableAction;
          const res = await validate();
          console.log(res);
        },
      };
    },
  },
];

const [register, { updateSchema, appendSchemaByField, removeSchemaByField }] =
  useForm({
    labelWidth: 120,
    schemas,
    actionColOptions: {
      span: 24,
    },
  });
const [register1] = useForm({
  labelWidth: 120,
  schemas: schemas1,
  actionColOptions: {
    span: 24,
  },
});
function changeLabel3() {
  updateSchema({
    field: "field3",
    label: "字段3 New",
  });
}
function changeLabel34() {
  updateSchema([
    {
      field: "field3",
      label: "字段3 New++",
    },
    {
      field: "field4",
      label: "字段4 New++",
    },
  ]);
}

function appendField() {
  appendSchemaByField(
    {
      field: "field10",
      label: "字段10",
      component: "Input",
      colProps: {
        span: 8,
      },
    },
    "field3",
  );
}
function deleteField() {
  removeSchemaByField("field11");
}
</script>
